<template>
  <div class="table-wrap">
    <el-table
      ref="singleTable"
      :data="tableData"
      style="width: 100%"
      border
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
      <el-table-column label="日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="消息发布者" width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span style="margin-left: 10px">{{ scope.row.sourceName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="消息接收人" width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span style="margin-left: 10px">{{ scope.row.sendName }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="消息内容" width="180">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper dan">
            <span style="margin-left: 10px">{{ scope.row.msgDate }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini">{{
            scope.row.top ? "取消置顶" : "置顶"
          }}</el-button>
          <el-button size="mini" @click="check(scope.$index, scope.row)"
            >查看</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: [],
    },
    curPage:{
      type:Number,
      default:1
    },
    curSize:{
      type:Number,
      default:10
    },
  },
  data() {
    return {
      multipleSelection: [],
    };
  },
  methods: {
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleCurrentChange(val) {
      // 如果val为空，停止调用弹出dialog
      if (!val) return;
      // 弹出dialog
      this.$store.commit("msg/changeDialogShow", true);
      this.setCurrent();
      console.log(val);
    },
    setCurrent() {
      this.$refs.singleTable.setCurrentRow();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 查看
    check(index, row) {
      // 索引，当前页，当前页的条数
      console.log((index + 1) + ((this.curPage - 1) * this.curSize ), row);
      this.$store.commit("msg/changeDialogShow", true);
      this.$store.commit("msg/setInfo",row)
    },
  },
};
</script>
 
<style lang="less" scoped>
.table-wrap {
  /deep/ .el-table__row {
    cursor: pointer;
  }
}
</style>